 @import './com';


header{
    .h_top{
        width: vw(750);
        height: vw(150);

        display: flex;
        justify-content: space-around;
        align-items: center;

        >img{
        width: vw(125);
        }

        >.inp{
            position: relative;
            
            width: vw(270);
            height: vw(52);
            border:vw(1) solid $col;
            border-radius: vw(26);
            box-sizing: border-box;
            //icon
            &::after{
                content: "";
                position: absolute;
                right: vw(16);
                top: vw(8);
                width: vw(36);
                height: vw(34);
                background:url(../images/index/搜索矩.png) no-repeat top/cover ;
            }
            >input{
                margin-top: vw(13);
                width: vw(183);
                height: vw(34);
                line-height: vw(34);
                font-size: vw(24);
                margin-top: vw(11);
                margin-left: vw(27);
                border: none;
                outline: none;
            }
        }
        //  地区
        .sel{
            position: relative; 

            >select{
                width: vw(160);
                height: vw(60);
               border:vw(1) solid $col;
               box-sizing: border-box;
               -webkit-appearance: none;//去除下拉箭头
               font-size: vw(26);
               text-indent: vw(17);//首行缩进

            
            }
              >i{
                   position: absolute;
                   top: 50%;
                   margin-top: vw(-7.5);
                   margin-right: vw(16);
                   right: 0;
                   width: 0;
                   height: 0;
                   border: vw(15) solid transparent;
                   border-top:vw(15) solid $col ;
                   //穿透
                   pointer-events: none;

               }
           
        }
    }
    
    .h_bt{
        position: relative;
        width: vw(750);
        overflow:auto;
        >ul{
              width: vw(750 * 3);
              font-size: 0;
            >li{
                display: inline-block;
                white-space: normal;
                width: vw(750);
                height: vw(287);
                overflow: hidden;
                >img{
                width: 100%;
                margin-top: -15%;
                }
            }
        }
        //进度条
        .bar{
                position: absolute;
                top: vw(186);
                width: 100%;
                height: vw(10);
                background-color: rgba(0,0,0,0.5);
                >div{
                    position: absolute;
                    left: vw(150);
                    width: vw(130);
                    height: vw(10);
                    background-color: rgba(255,255,255,0.5);
                }
        }
    }
}
//    内容
main{
      .m_top{
          width: vw(750);
          height: vw(438);
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          
        
          .top1{
              margin-top: vw(15);
              width: vw(750);
              height: vw(54);
              display: flex;
              justify-content: space-between;
              align-items: center;
              >p:first-of-type{
                margin-left: vw(22);
                font-size: vw(30);
                >img{
                    width: vw(55);
                    height: vw(55);
                vertical-align: middle;

                }
              }
              >p:last-of-type{
                    margin-right: vw(22);
                    font-size: vw(24);
                    >img{
                        width: vw(24);
                        height: vw(24);
                        vertical-align: middle;
                    }
              }
          

             
          }
          .top2{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
          
            width: vw(750);
            height: vw(215);
            >p{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: vw(240);
                height: vw(215);
                >img{
                    width: vw(240);
                    height: vw(93);
                }
            }
        }
        .top3{
            width: vw(750);
            height: vw(54);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: vw(10);
            >p:first-of-type{
              margin-left: vw(22);
              font-size: vw(30);
          
              >img{
                  width: vw(55);
                  height: vw(50);
              vertical-align: middle;

              }
            }
            >p:last-of-type{
                  margin-right: vw(22);
                  font-size: vw(24);
                  >img{
                      width: vw(24);
                      height: vw(24);
                      vertical-align: middle;
                  }
            }
        }

 
      }
      //底部内容
      .m_bt{
        width: vw(750);
        height: vw(358);
        
      
        >.bt1{
            display: flex;
            justify-content: space-evenly;
            width: vw(750);
            height: vw(165);
            margin-bottom: vw(25);
           >img{
               width: vw(210);
               height: vw(165);
           }
           >.txt{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-top: vw(28);
               width: vw(485);
               height: vw(125);

               >.title{
                width: vw(485);
                display: flex;
                justify-content: space-between;
                >h4{
                    font-size: vw(30);
                }

                >span{
                    margin-top: vw(8);
                    font-size: vw(22);
                }
            }
            .info{
                font-size: vw(22);
                display: flex;

                >span{
                    margin-left: vw(5);
                }
            }
            .type{
                display: flex;
                width: vw(485);
                justify-content: space-between;

                >h4{
                    color: $col;
                    font-size: vw(30);
                }
                >span{
                    font-size: vw(22);
                }
            }
           }
        }


       
    }


}


// 底部导航栏
nav{
    @extend .sticky;

    >.bt{
        width: vw(750);
        height: vw(135);
        @extend .flex1;
        >p{
        @extend .flex1;
            flex-direction: column;
            width: vw(73);
            font-size: vw(26);
            img{
                width: vw(73);
                height: vw(73);
            }
            span{
                display: flex;
                justify-content: center;
            }
            
        }
    }
   
}